import React, { useEffect, useState } from 'react'
import "../../../api/Data"
import request from "../../../api/request"
import { useDispatch, useSelector } from "react-redux"
import { ALLSTATE, GETSORT } from "../../../types/store.d"
import { Tabs, NavBar, Search, Sidebar, Image, ProductCard, Tag, Grid } from 'react-vant';
import {useNavigate} from "react-router-dom"
function Shopcar() {
  const dispatch = useDispatch()
  const navigate = useNavigate()
  useEffect(() => {
    request.get("/api/sort").then(res => {
      dispatch({
        type: GETSORT,
        payload: res.data.sort
      })
    })
  }, [])
  const sortArr = useSelector((state: ALLSTATE) => {
    return state.sortArr
  })
  console.log(sortArr, "====");

  return (
    <div className="shop">
      {
        sortArr.map((item, index) => {
          return <div key={index} className="label">
            <p>男生热榜</p>
            {
              item.conone.map((item, i) => {
                return (
                  <ProductCard key={i}  onClick={()=>navigate("/detail/"+item.id,{state:item})}
                    desc={item.desc}
                    title={item.title}
                    thumb={item.img}
                  />
                );
              })
            }
          </div>
        })
      }
    </div>
  )
}

export default Shopcar